<script lang="ts" setup>
import { refreshPage } from '@/utils/common'
import { reactive, ref, watch } from 'vue'
import { pageUrl, smsTemplateCode } from '@/utils/constants'
import { useAddressStore, useMemberStore, useSettingStore } from '@/stores'
import { isDev } from '@/utils/constants'
import { onLoad, onReady } from '@dcloudio/uni-app'
import {
  miniAppLoginApi,
  quickLoginApi,
  loginByPhone,
  loginByPassword,
  registerApi,
  bindWxInfo,
} from '@/api/login'
import type { loginResult } from '@/types/member'
import { testLoginApi, getSendCode } from '@/api/login'
import PhoneNumberInput from '@/components/phone-number-input/phone-number-input.vue'
import { getAddressApi } from '@/api/address'
const form = reactive({
  // username: '1905759105@qq.com',
  // password: 'Zq123456',
  username: '',
  password: '',
  phone: '',
  sms_captcha_code: '',
  checked: false,
  first_name: '',
  last_name: '',
  email: '',
  email_code: '',
  invitation_code: '',
  passwordConfirm: '',
  marketing_consent: false,
  isPhone: true, //是否手机端
})
// 当前页面操作类型
enum operateTypeEnum {
  login = 'login',
  register = 'register',
}
const operateType = ref(operateTypeEnum.login)
// 切换操作类型
const onChangeOperateType = (type: operateTypeEnum) => {
  // operateType.value = type
  uni.navigateTo({
    url: `${pageUrl['register']}`,
  })
  resetForm()
}
// 登录方式
enum loginTypeEnum {
  password = 'password',
  phone = 'phone',
  miniapp = 'miniapp',
}
const defaultLoingType =
  uni.getSystemInfoSync().uniPlatform === 'mp-weixin'
    ? loginTypeEnum.miniapp
    : loginTypeEnum.password
const loginType = ref(defaultLoingType)
// 切换登录方式
const onChangeLoginType = (type: loginTypeEnum) => {
  loginType.value = type
  resetForm()
}


// 重置表单
const resetForm = () => {
  form.password = ''
  form.sms_captcha_code = ''
  form.phone = ''
  form.username = ''
  form.first_name = ''
  form.last_name = ''
  form.email = ''
  form.email_code = ''
  form.invitation_code = ''
  form.passwordConfirm = ''
  form.marketing_consent = false

  formRef.value.clearValidate()
  formRules.username.rules[0].errorMessage =
  operateType.value === operateTypeEnum.register ? 'Please enter username' : 'Please enter username/phone number'
}
// 校验协议
const checkAgreement = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (form.checked) {
      resolve()
    } else {
      uni.showToast({
        icon: 'none',
        title: 'Please read and agree to the related agreement',
      })
      reject('User did not select agreement')
    }
  })
}
// 登录操作
const login = async (formRef: UniHelper.FormOnSubmitEvent) => {
  try {
    await formRef.validate()
    await checkAgreement()
    if (loginType.value === loginTypeEnum.password) {
      const res = await loginByPassword({
        username: form.username,
        password: form.password,
      })
      loginSuccess(res.result)
    } else if (loginType.value === loginTypeEnum.phone) {
      const res = await loginByPhone({
        phone: form.phone,
        sms_captcha_code: form.sms_captcha_code,
      })
      loginSuccess(res.result)
    }
  } catch (err: any) {
    if (err.data?.msg) {
      uni.showToast({
        title: err.data.msg,
        icon: 'none',
        duration: 3000,
      })
    }
    console.log(err)
  }
}
// 注册
const register = async (ref: any) => {
  try {
    await ref.validate()
    await checkAgreement()

    let login_code = ''
    // #ifdef MP-WEIXIN
    login_code = await getLoginCode()
    // #endif

    const res = await registerApi({
      username: `${form.first_name} ${form.last_name}`,
      first_name: form.first_name,
      last_name: form.last_name,
      password: form.password,
      mobile: form.phone,
      sms_captcha_code: form.sms_captcha_code,
      email: form.email,
      email_code: form.email_code,
      invitation_code: form.invitation_code,
      marketing_consent: form.marketing_consent,
      isPhone: form.isPhone,
      passwordConfirm: form.passwordConfirm,
    })

    uni.showToast({
      title: 'Registration successful',
      icon: 'success',
      mask: true,
    })

    setTimeout(() => {
      refreshPage()
    }, 1500)
  } catch (err: any) {
    console.log(err)
  }
}
// 协议勾选操作
const privacyChange = (e: any) => {
  form.checked = e.detail.value.length ? true : false
}
// 跳转协议内容
const goToRichText = (type: string) => {
  const agreementData = useSettingStore().data.agreement

  let title = ''
  if (type == 'user_agreement') {
    title = 'User Agreement'
  }
  if (type == 'privacy_agreement') {
    title = 'Privacy Policy'
  }

  uni.navigateTo({
    url: `${pageUrl['rich-text']}?title=${title}&content=
    ${encodeURIComponent(agreementData[type as keyof typeof agreementData])}`,
  })
}
let passDigitCheck = ref(false);
let passRuleCheck = ref(false);
watch(()=>form.password, (newVal)=>{
  if(newVal.length>=8){
    passDigitCheck.value = true;
  }
  if(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(newVal)){
    passRuleCheck.value = true;
  }
})
// 表单校验规则
const formRules = {
  username: {
    rules: [
      {
        required: true,
        errorMessage: 'Please enter username/phone number',
      },
      // {
      //   validateFunction: (rule: any, value: string, data: any, callback: Function) => {
      //     if (!/^[A-Za-z0-9*]{4,11}$/.test(value)) {
      //       return callback('Username must be 4~11 characters, only letters, numbers, and * are allowed')
      //     }
      //   },
      // },
    ],
  },
  first_name: {
    rules: [
      { required: true, errorMessage: 'Please enter first name' }
    ]
  },
  last_name: {
    rules: [
      { required: true, errorMessage: 'Please enter last name' }
    ]
  },
  email: {
    rules: [
      { required: true, errorMessage: 'Please enter email' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) {
            return callback('Please enter a valid email format')
          }
        },
      }
    ]
  },
  email_code: {
    rules: [
      { required: true, errorMessage: 'Please enter verification code' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: 'Please enter password' },
      { min: 8, message: 'Password does not meet requirements', trigger: 'blur' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          // if (!/^(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
          if (!/^(?=.*[a-z])(?=.*[A-Z])[A-Za-z\d]{8,}$/.test(value)) {
            return callback('password is 8-32 alphanumeric characters')
          }
        },
      },
    ],
  },
  passwordConfirm: {
    rules: [
      { required: true, errorMessage: 'Please confirm password' },
      {
        validateFunction: (rule: any, value: string, data: any, callback: Function) => {
          if (value !== form.password) {
            return callback('Two entered passwords do not match')
          }
        }
      }
    ]
  },
  phone: {
    rules: [
      { required: true, errorMessage: 'Please enter phone number' },
      // {
      //   validateFunction: (rule: any, value: string, data: any, callback: Function) => {
      //     if (!/^(1[3-9])\d{9}$/.test(value.toString())) {
      //       return callback('Incorrect phone number format')
      //     }
      //   },
      // },
    ],
  },
  sms_captcha_code: {
    rules: [{ required: true, errorMessage: 'Please enter SMS verification code' }],
  },
}
const formRef = ref()
onReady(() => {
  formRef.value.setRules(formRules)
})

const resetPwdRef = ref()
const onOpenResetpwdPopup = () => {
  resetPwdRef.value?.open()
}

// #ifdef MP-WEIXIN
const quickLogin = ref(false)
// 通过小程序获取手机号登录
const userLoginByMiniapp: UniHelper.ButtonOnGetphonenumber = async (event) => {
  const code = event.detail.code!
  if (!code) return

  const login_code = await getLoginCode()
  if (login_code == '') {
    uni.showToast({
      icon: 'error',
      title: 'Login exception',
    })
    return
  }
  const res = await miniAppLoginApi({ code, login_code })
  if (res.result) {
    loginSuccess(res.result)
  }
}
// 获取登录code
const getLoginCode = async (): Promise<string> => {
  return new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      onlyAuthorize: true,
      success: function (event) {
        const { code } = event
        resolve(code)
      },
      fail: function (err) {
        console.warn(err)
        quickLogin.value = false
        reject(err)
      },
    })
  })
}
//快捷登录
const doQuickLogin = async (code: string) => {
  const res = await quickLoginApi(code)
  if (Object.keys(res.result).length === 0) {
    quickLogin.value = false
  } else {
    uni.showLoading({
      title: 'Quick Login in progress',
      mask: true,
    })
    setTimeout(() => {
      loginSuccess(res.result)
    }, 1500)
  }
}
// 快捷登录检测
const checkQuickLogin = async () => {
  const login_code = await getLoginCode()
  console.log('Obtained login code: ' + login_code)
  doQuickLogin(login_code).catch((err) => {
    quickLogin.value = false
    console.warn(err)
    // 账号异常
    if (err.data.code === 50001) {
      uni.showModal({
        content: err.data.msg,
        showCancel: false,
        success: function (res) {
          uni.navigateTo({ url: pageUrl['index'] })
        },
      })
    }
  })
}
// #endif

// 测试登录
const testLogin = () => {
  testLoginApi('13312345678').then((res) => {
    loginSuccess(res.result)
  })
}

// 登录成功后处理
const loginSuccess = async (userData: loginResult) => {
  if (Object.keys(userData).length === 0) {
    uni.showToast({
      icon: 'error',
      title: 'Login failed',
    })
    return
  }
  useMemberStore().setProfile(userData)

  // #ifdef MP-WEIXIN
  if (!userData.has_openid) {
    const login_code = await getLoginCode()
    console.log('Obtained login code: ' + login_code)
    bindWxInfo({
      login_code,
    })
  }
  // #endif

  uni.showToast({
    icon: 'success',
    title: 'Login successful',
  })

  useAddressStore().clearSelectedAddress()

  await getAddressList()

  setTimeout(() => {
    uni.$emit('refreshData')
    // 重定向到首页
    uni.reLaunch({ url: `${pageUrl['index']}` })
    // uni.navigateBack()
  }, 500)
}

const getAddressList = () => {
  getAddressApi({
    page: 1,
    page_size: 10,
  }).then((res) => {
    useAddressStore().changeSelectedAddress(res.result.data[0])
  })
}

// 倒计时相关
const countdown = ref(0);
const isCounting = ref(false);
let timer: NodeJS.Timeout | null = null;
// Email verification code handler
const requestVerificationCode = async (event: Event) => {
  event.preventDefault(); // 阻止默认行为

  if (!form.email) {
    uni.showToast({
      title: 'Please enter email first',
      icon: 'none'
    })
    return
  }

  // Check if email format is valid
  if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(form.email)) {
    uni.showToast({
      title: 'Incorrect email format',
      icon: 'none'
    })
    return
  }

  try {
    // 开始倒计时
    isCounting.value = true;
    countdown.value = 60;

    // 清除之前的定时器
    if (timer) {
      clearInterval(timer);
    }

    // 设置新的定时器
    timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer!);
        isCounting.value = false;
      }
    }, 1000);

    const res = await getSendCode(form.email);
    if (res.code === 200) {
      uni.showToast({
        title: 'Verification code sent successfully',
        icon: 'success'
      })
    } else if (res.code === 40023) {
      uni.showToast({
        title: res.msg,
        icon: 'warning'
      })
      // 发送失败时重置倒计时
      clearInterval(timer!);
      isCounting.value = false;
      countdown.value = 0;
    }
  } catch (error) {
    // 发生错误时重置倒计时
    if (timer) {
      clearInterval(timer);
    }
    isCounting.value = false;
    countdown.value = 0;
    uni.showToast({
      title: 'Failed to send verification code',
      icon: 'error'
    })
  }



  // Here you would add the actual API call to request the verification code
  // For example:
  // sendEmailVerificationCode(form.email).then(res => {
  //   // Handle response
  // }).catch(err => {
  //   // Handle error
  // })
}

// Invitation code visibility control
const showInvitationCode = ref(false)

// Toggle invitation code visibility
const toggleInvitationCode = (e: any) => {
  showInvitationCode.value = e.detail.value.includes('invitation')
}

// Add phone data handler
const handlePhoneData = (data: any) => {
  if (data.isValid) {
    form.phone = data.data.phoneNumber
  }
}

onLoad(() => {
  // #ifdef MP-WEIXIN
  checkQuickLogin()
  // #endif
})
</script>

<template>

  <view class="page">
    <view class="header">
      <!-- <view class="left"><navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator></view> -->
      <!-- <view class="title">{{ operateType === operateTypeEnum.login? 'Log in' : 'Sign up' }}</view> -->
      <view v-if="operateType === operateTypeEnum.register" class="right" @tap="onChangeOperateType(operateTypeEnum.login)">Log in</view>
      <view v-if="operateType === operateTypeEnum.login" class="right" @tap="onChangeOperateType(operateTypeEnum.register)">Sign up</view>
    </view>

    <view class="logo" v-if="operateType === operateTypeEnum.login">
      <!-- <image src="/static/images/logo.png"></image> -->
      <image src="/static/images/hlsLogo.png"></image>
    </view>
    <uni-forms class="register-form" ref="formRef" :model="form" validateTrigger="blur">
      <!-- Register form -->
      <view v-if="operateType === operateTypeEnum.register" style="padding-top: 20rpx;">
        <!-- First and Last Name -->
        <view class="name-row">
          <uni-forms-item name="first_name" class="input-half">
            <uni-easyinput
              type="text"
              maxlength="32"
              v-model.trim="form.first_name"
              placeholder="First name"
            />
          </uni-forms-item>
          <uni-forms-item name="last_name" class="input-half">
            <uni-easyinput
              type="text"
              maxlength="32"
              v-model.trim="form.last_name"
              placeholder="Last name"
            />
          </uni-forms-item>
        </view>

        <!-- Phone Number with Country Code -->
        <uni-forms-item name="phone" class="input">
          <phone-number-input
            :initialPhoneNumber="form.phone"
            :initialCountryCode="'+1'"
            @update:phoneData="handlePhoneData"
          />
        </uni-forms-item>

        <!-- Email -->
        <uni-forms-item name="email" class="input">
          <uni-easyinput type="text" v-model="form.email" placeholder="Email" />
        </uni-forms-item>

        <!-- Email Verification Code -->
        <uni-forms-item name="email_code" class="input">
          <view class="verification-container">
            <uni-easyinput
              type="text"
              v-model="form.email_code"
              placeholder="Email verification code"
              class="verification-input"
            />
            <button :class="{'send-btn': form.email!==''}" :disabled="isCounting" class="verification-btn" @tap="requestVerificationCode">{{ isCounting ? `${countdown}s` : "Obtain verification code" }}</button>
          </view>
        </uni-forms-item>

        <!-- Invitation Code (Optional) -->
        <view class="checkbox-row" style="margin-bottom: 40rpx;">
          <checkbox-group name="invitation-checkbox" @change="toggleInvitationCode">
            <label>
              <checkbox value="invitation" color="#EB6100" />
              <text>invitation code</text>
            </label>
          </checkbox-group>
        </view>
        <uni-forms-item name="invitation_code" class="input" v-if="showInvitationCode">
          <uni-easyinput
            type="text"
            v-model="form.invitation_code"
            placeholder="Invitation Code (Optional)"
          />
        </uni-forms-item>



        <!-- Password -->
        <uni-forms-item name="password" class="input" style="margin-bottom: 30rpx;">
          <uni-easyinput type="password" v-model="form.password" placeholder="Password" />
        </uni-forms-item>

        <!-- Password Requirements -->
        <view class="password-requirements">
          <view class="requirement-item">
            <text class="check-icon" v-if="passDigitCheck">✓</text>
            <text>At least 8 characters</text>
          </view>
          <view class="requirement-item">
            <text class="check-icon" v-if="passRuleCheck">✓</text>
            <text>Contains numbers and letters</text>
          </view>
        </view>

        <!-- Confirm Password -->
        <uni-forms-item name="passwordConfirm" class="input">
          <uni-easyinput type="password" v-model="form.passwordConfirm" placeholder="Confirm password" />
        </uni-forms-item>
        <text class="password-match-text">The confirmation password must match the password</text>

        <!-- Marketing Consent -->
        <view class="checkbox-row">
          <checkbox-group @change="(e) => form.marketing_consent = e.detail.value.length > 0">
            <checkbox :checked="form.marketing_consent" color="#67CCC4" style="transform: scale(0.7)" />
          </checkbox-group>
          <view class="consent-text">
            I agree to receiving marketing and promotional offers viaemail and SMS. You'll also get 20% off your first order.
          </view>
        </view>

        <!-- Terms Checkbox -->
        <view class="checkbox-row">
          <checkbox-group @change="privacyChange">
            <checkbox :checked="form.checked" color="#67CCC4" style="transform: scale(0.7)" />
          </checkbox-group>
          <view class="consent-text">
            By creating an account you agree to our website T&Cs and<text class="contract" @tap="goToRichText('privacy_agreement')">Privacy Policy</text>
          </view>
        </view>

        <!-- Submit Button -->
        <view class="operate">
          <button @click="register(formRef)" :class="form.checked ? 'active' : ''">Register</button>
          <!-- <button class="register" @tap="onChangeOperateType(operateTypeEnum.login)" :class="form.checked ? 'active' : ''"> Log in</button> -->
        </view>
      </view>

      <!-- Login Form -->
      <view v-if="operateType === operateTypeEnum.login">
        <view v-if="loginType === loginTypeEnum.password">
          <uni-forms-item name="username" class="input">
            <uni-easyinput
              type="text"
              maxlength="32"
              v-model.trim="form.username"
              placeholder="Username/Phone Number"
            />
          </uni-forms-item>
          <uni-forms-item name="password" class="input">
            <uni-easyinput type="password" v-model="form.password" placeholder="Password" />
          </uni-forms-item>
        </view>
        <view v-if="loginType === loginTypeEnum.phone">
          <!-- 手机号码 -->
          <uni-forms-item name="phone" class="input">
            <phone-number-input
              :initialPhoneNumber="form.phone"
              :initialCountryCode="'+1'"
              @update:phoneData="handlePhoneData"
            />
          </uni-forms-item>
          <!-- 验证码 -->
          <shop-sms-captcha
            :phone="form.phone"
            :template_code="smsTemplateCode.verifyPhone"
            :username="form.username"
            :password="form.password"
            v-model:sms_captcha="form.sms_captcha_code"
          />
        </view>

        <!-- #ifdef MP-WEIXIN-->
        <view v-if="loginType === loginTypeEnum.miniapp">
          <view class="operate">
            <button
              v-if="form.checked"
              class="button phone active"
              open-type="getPhoneNumber"
              @getphonenumber="userLoginByMiniapp"
            >
              <text class="icon icon-phone" />
              <text style="margin-left: 20rpx">Quick Login with Phone</text>
            </button>
            <button v-else class="button phone-disabled" @tap="checkAgreement">
              <text class="icon icon-phone" />
              <text style="margin-left: 20rpx">Quick Login with Phone</text>
            </button>
          </view>
        </view>
        <!-- #endif -->

        <view v-if="loginType === loginTypeEnum.password" class="reset-pwd">
          <text @tap="onOpenResetpwdPopup">Forgot Password</text>
        </view>

        <view class="tip">
          <checkbox-group @change="privacyChange">
            <checkbox :checked="form.checked" color="#67CCC4" style="transform: scale(0.7)" />
          </checkbox-group>
          <view>
            I have read and agree to
            <text class="contract" @tap="goToRichText('user_agreement')">《User Agreement》</text> and
            <text class="contract" @tap="goToRichText('privacy_agreement')">《Privacy Policy》</text>
          </view>
        </view>

        <view class="operate">
          <button v-if="loginType !== loginTypeEnum.miniapp" @tap="login(formRef)" :class="form.checked ? 'active' : ''">Login</button>
          <!-- <button @tap="onChangeOperateType(operateTypeEnum.register)" class="register">
            Register
          </button> -->
        </view>

        <!-- <view class="extra">
          <text class="caption"><text class="span">Other Login Methods</text></text>
          <view class="options">
            <button class="button" v-if="isDev" @tap="testLogin">
              <image src="/static/icons/test_user.svg" class="icon option-icon" />Test Account Login
            </button>
            <button class="icon" @tap="onChangeLoginType(loginTypeEnum.password)">
              <image class="icon option-icon" src="/static/icons/password.svg" />
              Password Login
            </button>
            <button class="icon" @tap="onChangeLoginType(loginTypeEnum.phone)">
              <image class="icon option-icon" src="/static/icons/sms.svg" />
              SMS Login
            </button> -->
            <!-- #ifdef MP-WEIXIN -->
            <!-- <button class="icon" @tap="onChangeLoginType(loginTypeEnum.miniapp)">
              <image class="icon option-icon" src="/static/icons/wechat.svg" />Quick Login
            </button> -->
            <!-- #endif -->
          <!-- </view>
        </view> -->
      </view>
    </uni-forms>
  </view>

  <!-- 重置密码 -->
  <shop-reset-password ref="resetPwdRef" v-if="loginType === loginTypeEnum.password && operateType === operateTypeEnum.login" />
</template>

<style lang="scss" scoped>

.page {
  padding: 40rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;

  .header{
    display: flex;
    // justify-content: space-between;
    align-items: center;
    >view{
      flex: 1;
      text-align: center;

      &:first-child{
        text-align: left;
      }

      &:last-child{
        text-align: right;
      }
    }

    .title{
      font-size: 40rpx;
      font-weight: 500;
    }
    .right{
      font-size: 30rpx;
      position: relative;
      top: -6rpx;
    }
  }

  .logo {
    display: flex;
    justify-content: center;
    margin-bottom: 80rpx;
    margin-top: 40rpx;
    image {
      aspect-ratio: 2 / 1;
      width: 300rpx;
      height: 260rpx;
      // border-radius: 50%;
    }
  }

  .input {
    width: 100%;
    margin-bottom: 60rpx;
  }


  .input :deep(.uni-easyinput__content) {
    border: 1px solid #dcdfe6;
    border-radius: 4px !important;
    background-color: #fff !important;
    height: 44px !important;
  }

  .input :deep(.uni-easyinput__content-input) {
    height: 44px !important;
    padding: 0 10px !important;
  }

  .name-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
  }

  .input-half {
    flex: 1;
  }

  .input-half :deep(.uni-easyinput__content) {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    height: 44px !important;
  }

  .input-half :deep(.uni-easyinput__content-input) {
    height: 44px !important;
    padding: 0 10px !important;
  }

  .verification-container {
    display: flex;
    gap: 20rpx;
  }

  .verification-input {
    flex: 1;
  }

  .verification-input :deep(.uni-easyinput__content) {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    height: 44px !important;
  }

  .verification-input :deep(.uni-easyinput__content-input) {
    height: 44px !important;
    padding: 0 10px !important;
  }

  .verification-btn {
    width: 200rpx;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #ddd;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }
  .send-btn{
    background-color: #ff5f3c;
  }

  .checkbox-row {
    display: flex;
    align-items: flex-start;
    margin: 20rpx 0;
    font-size: 24rpx;

    .consent-text {
      flex: 1;
      margin-top: -4rpx;
    }
  }

  .invitation-row {
    margin-top: 30rpx;
    margin-bottom: 10rpx;

    text {
      font-size: 30rpx;
      font-weight: 500;
    }
  }

  .password-requirements {
    margin: 0rpx 0 30rpx 0;

    .requirement-item {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      font-size: 26rpx;
      color: #666;

      .check-icon {
        color: #ff5f3c;
        margin-right: 10rpx;
      }
    }
  }

  .password-match-text {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 30rpx;
  }

  .reset-pwd {
    display: flex;
    justify-content: flex-end;
    text-decoration: underline;
    font-size: 24rpx;
    margin-bottom: 20rpx;
    // color: red;
  }

  .operate {
    margin-top: 80rpx;
    margin-bottom: 30rpx;

    button {
      margin-bottom: 30rpx;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background: #f9b0a0;
      color: #fff;
      font-size: 14px;
    }

    .active {
      background: #ff5f3c;
    }


    .register {
      background: #909399;
    }
  }

  .tip {
    color: #777;
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    font-size: 24rpx;

    .contract {
      color: blue;
    }
  }

  .extra {
    flex: 1;
    padding-top: 100rpx;

    .caption {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 0;
      border-top: 0.03125rem solid #ddd;
      font-size: 0.8125rem;
      color: #999;
      position: relative;

      .span {
        background-color: #fff;
        padding: 0 10rpx;
        position: relative;
      }
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 50rpx;

      button {
        font-size: 24rpx;
        color: #444;
        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 5rpx 10rpx;
        background-color: transparent;

        &::after {
          border: none;
        }
      }

      .option-icon {
        width: 80rpx;
        height: 80rpx;
        padding-bottom: 15rpx;
      }
    }
  }

  .register-form{
    margin-top: 40rpx;
  }
}
</style>
